<extend name="Base/common"/>
<!--买票详细页面-->
<block name="body">
    <link rel="stylesheet" href="__STATIC__/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="__CSS__/ny.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/seatchart/jquery.seat-charts.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/seatchart/seat.style.css">
    <div class="block">
        <div class="bordercss">&nbsp;您现在的位置 >
            <a href="{:U('index')}" target="_self">演唱会</a> >
            <a href="{:U('index',array('category_id'=>$category['id']))}" target="_self">{$category['title']}</a></div>
    </div>
    <div class="block">
        <div class="bordercss">
            <div class="goodsshowname"><span>{$concert['title']}</span> <font>[售票中]</font></div>
            <div class="clear"></div>
            <div id="goodsInfo" class="clearfix">
                <div class="imgInfo">
                    <a href="{$concert['cover_id']|get_cover='path'}" title="{$concert['title']}">
                        <img src="{$concert['cover_id']|get_cover='path'}" alt="{$concert['title']}" class="thumb"/>
                    </a>
                </div>

                <div class="textInfo">
                    <form action="javascript:addToCart(11586)" method="post" name="ECS_FORMBUY" id="ECS_FORMBUY">
                        <div class="goodsheight">
                            <div class="f_l goodsleft">
                                <div class="goodsshowtype">
                                    <ul>
                                        <li>演唱会详情</li>
                                        <li>演出时间：{$content['showtime']|date='Y-m-d h:i',###}</a></li>
                                        <li>价格：<font style="padding-left:10px;" class="shop_s1" id="ECS_SHOPPRICE">￥{$concert['min_price']}</font>&nbsp;起
                                        </li>
                                        <li>在线客服：
                                            <a href="http://wpa.qq.com/msgrd?V=1&Uin=271513&Site=%D6%D0%B9%FA%B7%DB%CB%BF%CD%F8&Menu=yes"
                                               target="_blank"><img src="http://wpa.qq.com/pa?p=1:271513:4" height="16"
                                                                    border="0" alt="QQ"/> 271513</a>
                                            <a href="http://wpa.qq.com/msgrd?V=1&Uin=694629998&Site=%D6%D0%B9%FA%B7%DB%CB%BF%CD%F8&Menu=yes"
                                               target="_blank"><img src="http://wpa.qq.com/pa?p=1:694629998:4"
                                                                    height="16" border="0" alt="QQ"/> 694629998</a>
                                        </li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div class="f_r goodsright">
                                <div class="goupiaotab">
                                    <ul>
                                        <li class="sedtab">网上购票</li>
                                        <li>上门购票</li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                                <div>
                                    <div class="piaoSuper_info">
                                        <div class="piaotxt">根据提示即可完成订票。电话订票请致电二十四小时客服:<font
                                                color="#FF0000">13714909398</font> 我们的客服将协助您完成订票
                                        </div>
                                    </div>
                                    <div class="piaoSuper_info none">
                                        <div class="piaotxt">我们的地址:深圳市南山区玉泉路89号2栋4楼 <br></div>
                                    </div>
                                </div>
                            </div>

                            <div class="clear"></div>
                        </div>
                        <div class="blank5 clearfix"></div>
                        <div class="goodsbottom">
                            <div>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                            <div class="clear"></div>
                            <div>选座：<a href="#modal-seat" data-toggle="modal">[在线选座]</a></div>
                            <div style="padding-top:6px;">票数：<span id="counter">0</span>张</div>
                            <div style="padding-top:6px;">总价：<font class="shop_s1">￥</font><font id="total" class="shop_s1">0</font>元</div>
                            <div class="buybottom" id="act_buy_btn">
                                <a title="立即购买" href="{:U('Concert/buy')}"
                                   class="add_to_flow bnts addtocart bnt_buy">&nbsp;&nbsp;</a>
                            </div>
                        </div>
                    </form>

                    <div class="blank5 clearfix"></div>
                </div>
            </div>
        </div>
        <div id="modal-seat" class="modal hide fade" style="display: none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>在线选座</h3>
            </div>
            <div class="modal-body">
                <div id="map">
                    <div id="seat-map">
                        <div class="front">{$concert['map_name']}</div>
                    </div>
                    <div class="booking-details">
                        <p style="font-size: 20px;">座位：</p>
                        <ul id="selected-seats"></ul>
                        <div id="legend"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success" data-dismiss="modal">确认</a>
                <a href="#" class="btn" data-dismiss="modal">关闭</a>
            </div>
        </div>
        <div class="blank20"></div>
        <div class="AreaR" style="float:left">
            <div id="Tab">
                <div class="tabline">
                    <div id="com_b" class="history clearfix">
                        <h2>歌手信息</h2>
                    </div>
                </div>
                <div class="Contentbox box_23" style=" min-height:100px;">
                    <div id="com_v" class="boxCenterList RelaArticle"></div>
                    <div id="com_h">
                        <blockquote>
                            <div class="lhg26"
                                 style="margin:0px; margin-left:10px;padding:0px;color:#4C4C4C;font-family:arial, Tahoma, simsun, 宋体;">
                                {$content['content']}
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <div class="AreaL" style="float:right;">

            <div>
                <div class="besthottitle">推荐演出</div>
                <div class="bordercss">
                    <div class="besthotlist">
                        <notempty name="shows">
                            <ul>
                                <volist name="shows" id="show">
                                    <li style="border-bottom:1px dashed #cccccc;">
                                        <a href="{:U('Concert/detail',array('id'=>$show['id']))}" class="besthotitem">
                                            <img src="{$show['cover_id']|get_cover='path'}" width="182" height="241"
                                                 border="0" align="absmiddle"/>
                                        </a>
                                        <p class="besthotname">
                                            <a href="{:U('Concert/detail',array('id'=>$show['id']))}">{$show['title']}</a>
                                        </p>
                                    </li>
                                </volist>
                            </ul>
                            <else/>
                            <div>暂时没有信息</div>
                        </notempty>
                    </div>
                </div>
            </div>

            <div>
                <div class="besthottitle">推荐直播</div>
                <div class="bordercss">
                    <div class="besthotlist">
                        <notempty name="onlines">
                            <ul>
                                <volist name="onlines" id="online">
                                    <li style="border-bottom:1px dashed #cccccc;">
                                        <a href="{:U('Online/detail',array('id'=>$online['id']))}" class="besthotitem">
                                            <img src="{$online['cover_id']|get_cover='path'}" width="182" height="241"
                                                 border="0" align="absmiddle"/>
                                        </a>
                                        <p class="besthotname">
                                            <a href="{:U('Online/detail',array('id'=>$online['id']))}">{$online['title']}</a>
                                        </p>
                                    </li>
                                </volist>
                            </ul>
                            <else/>
                            <div>暂时没有信息</div>
                        </notempty>
                    </div>
                </div>
            </div>
            <div class="blank15"></div>
        </div>
    </div>

    <script type="text/javascript" src="__PUBLIC__/Home/skins/2009/js/tc.min.js"></script>
    <style>
        #regiframe {
            position: absolute;
            width: 670px;
            min-height: 500px;
            border: 1px solid #ccc;
            background: #efefef;
            display: none;
            z-index: 999999;
            border-radius: 5px;
        }

        #sendarealist {
            position: absolute;
            width: 670px;
            min-height: 500px;
            border: 1px solid #ccc;
            background: #efefef;
            display: none;
            z-index: 999999;
        }

        .tit {
            background: #ddd;
            display: block;
            height: 33px;
            cursor: move;
            line-height: 33px;
        }

        .tit span {
            font-size: 14px;
            font-weight: bold;
            padding-left: 10px;
        }

        .tit i {
            float: right;
            line-height: 33px;
            padding: 0 8px;
            cursor: pointer;
        }

        .areaweb img {
            width: 650px;
            height: auto;
        }
    </style>
    <script type="text/javascript">
        /*注册*/
        $("#regid").click(function () {
            popWin("regiframe");
        });
    </script>

    <div class="clear"></div>
    <div></div>
    <div id="addmyplan" class="fixedRight toTop_show">
        <div id="BackTop"><a href="#top"></a></div>
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__PUBLIC__/Home/skins/2009/js/mywrite.js"></script>
    <script src="__PUBLIC__/static/jquery-2.0.3.min.js"></script>
    <script src="__PUBLIC__/static/bootstrap/js/bootstrap.js"></script>
    <script src="__PUBLIC__/static/seatchart/jquery.seat-charts.js"></script>
    <script type="text/javascript">

        /*��Ʒ�Ƽ�begin*/
        $(".twotab li").click(function(){
            jQuery(this).addClass("sedtab").siblings().removeClass("sedtab");
            recpindex = jQuery(this).index();
            jQuery(".Super_info").hide();
            jQuery(".Super_info").eq(recpindex).show();
        })
        /*��Ʒ�Ƽ�end*/

        /*��Ʒ�Ƽ�begin*/
        $(".hotmei li").click(function(){
            jQuery(this).addClass("sedtab").siblings().removeClass("sedtab");
            recpindex = jQuery(this).index();
            jQuery(".hotmeiSuper_info").hide();
            jQuery(".hotmeiSuper_info").eq(recpindex).show();
        })
        /*��Ʒ�Ƽ�end*/

        /*��Ʒ�Ƽ�begin*/
        $(".goupiaotab li").click(function(){
            jQuery(this).addClass("sedtab").siblings().removeClass("sedtab");
            recpindex = jQuery(this).index();
            jQuery(".piaoSuper_info").hide();
            jQuery(".piaoSuper_info").eq(recpindex).show();
        })
        /*��Ʒ�Ƽ�end*/

        function setMap() {
            var str = "{$concert['map']}";
            return str.split(",");
        }
        function setSetas() {
            var str = "{$concert['areas']}";
            var s1 = eval('(' + str + ')');
            return s1;
        }
        function setItems() {
            var str = "{$concert['items']}";
            var s3 = str.split(",");
            var s4 = [];
            for (var i = 0; i < s3.length; i++) {
                var tmp = s3[i].split("&");
                s4.push(tmp);
            }
            return s4;
        }
        $(function () {
            var map = setMap();
            var seats = setSetas();
            var items = setItems();
            var cart = $('#selected-seats');
            var counter = $('#counter');
            var total = $('#total');
            var seatLabel = 1;
            var last = 0;
            var sc = $('#seat-map').seatCharts({
                map: map,
                seats: seats,
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        if (last != row) {
                            last = row;
                            seatLabel = 1;
                        }
                        if (character != '_') {
                            return seatLabel++;
                        } else {
                            return 0;
                        }
                    }
                },
                legend: {
                    node: $('#legend'),
                    items: items
                },
                click: function () {
                    if (this.status() == 'available') {
                        $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座<a href="#" class="cancel-cart-item">&times;</a></li>')
                                .attr('id', 'cart-item-' + this.settings.id)
                                .data('seatId', this.settings.id)
                                .appendTo(cart);
                        counter.text(sc.find('selected').length + 1);
                        total.text(recalculateTotal(sc) + this.data().price);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        counter.text(sc.find('selected').length - 1);
                        //and total
                        total.text(recalculateTotal(sc) - this.data().price);

                        //remove the item from our cart
                        $('#cart-item-' + this.settings.id).remove();

                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
            setInterval(function () {
                $.ajax({
                    type: 'get',
                    url: '/bookings/get/100',
                    dataType: 'json',
                    success: function (response) {
                        //iterate through all bookings for our event
                        $.each(response.bookings, function (index, booking) {
                            //find seat by id and set its status to unavailable
                             sc.status(booking.seat_id, 'unavailable');
                        });
                    }
                });
            }, 5000); //every 5 seconds
            //this will handle "[cancel]" link clicks
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                sc.get($(this).parents('li:first').data('seatId')).click();
            });

            //let's pretend some seats have already been booked
//            sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
        });
        function recalculateTotal(sc) {
            var total = 0;
            //basically find every selected seat and sum its price
            sc.find('selected').each(function () {
                total += this.data().price;
            });
//            $('#submit').attr('disabled', true);
            return total;
        }
        function buy(sc){
            var seats = "";
            sc.find('selected').each(function () {
                seats += this.settings.id+",";
            });
            $.ajax({
                type: 'post',
                url: "{:U('Booking/addBooking')}",
                data: {
                    id : "{$concert['cid']}",
                    seats : seats,
                    price : $('#total').val(),
                    num : $('#counter').val()
                },
                dataType: 'json',
                success: function (response) {
                    //iterate through all bookings for our event
                    $.each(response.bookings, function (index, booking) {
                        //find seat by id and set its status to unavailable
                        sc.status(booking.seat_id, 'unavailable');
                    });
                }
            });
        }
    </script>
</block>